<template>
  <div class="house_page">
    <van-search
      show-action
      :label="$store.state.name"
      placeholder="请输入搜索关键词"
      class="vant-carousel-auto"
    >
      <template #left-icon>
        <div>
          <van-icon name="arrow-down" @click="toCity"></van-icon>
        </div>
      </template>
      <template #action>
        <span class="iconfont icon-dituzhaofang"></span>
      </template>
      <template #left>
        <div>
          <van-icon
            name="arrow-left"
            color="#fff"
            @click="goHome"
            class="goHome"
          />
        </div>
      </template>
    </van-search>

    <!-- ..........下拉菜单........... -->
    <van-dropdown-menu>
      <van-dropdown-item title="区域" ref="dropDown">
        <van-picker
          :columns="areaList"
          confirm-button-text=""
          cancel-button-text=""
          toolbar-position="bottom"
          ref="vanPicker"
        >
          <template #columns-bottom>
            <div style="display: flex">
              <van-button style="flex: 1" type="default" @click="cancleFnOne"
                >取消</van-button
              >
              <van-button style="flex: 1" type="primary" @click="confirmFnOne"
                >确定</van-button
              >
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>

      <van-dropdown-item title="方式" ref="dropDownTwo">
        <van-picker
          :columns="rentType"
          confirm-button-text=""
          cancel-button-text=""
          toolbar-position="bottom"
          ref="vanPickerTwo"
        >
          <template #columns-bottom>
            <div style="display: flex">
              <van-button style="flex: 1" type="default" @click="cancleFnTwo"
                >取消</van-button
              >
              <van-button style="flex: 1" type="primary" @click="confirmFnTwo"
                >确定</van-button
              >
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>

      <van-dropdown-item title="租金" ref="dropDownThree">
        <!-- <van-picker
            show-toolbar
            :columns="fundMoney" 
            toolbar-position="bottom"   
          />  -->
        <van-picker
          :columns="fundMoney"
          confirm-button-text=""
          cancel-button-text=""
          toolbar-position="bottom"
          ref="vanPickerThree"
        >
          <template #columns-bottom>
            <div style="display: flex">
              <van-button style="flex: 1" type="default" @click="cancleFnThree"
                >取消</van-button
              >
              <van-button style="flex: 1" type="primary" @click="confirmFnThree"
                >确定</van-button
              >
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @change="changeChoice">
        <van-popup
          v-model="popUp"
          position="right"
          :style="{ height: '100%', width: '80%' }"
        />
      </van-dropdown-item>
    </van-dropdown-menu>

    <div v-if="houseList.length">
      <van-swipe-cell v-for="item in houseList" :key="item.houseCode">
        <van-card
          :desc="item.desc"
          :title="item.title"
          class="goods-card"
          :thumb="`http://liufusong.top:8080${item.houseImg}`"
        >
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
          <template #tags>
            <span class="tags">
              {{ item.tags[0] }}
            </span>
          </template>
          <template #price>
            <div class="price">{{ item.price }}元/月</div>
          </template>
        </van-card>
      </van-swipe-cell>
    </div>
    <div v-else>
      <van-image
        width="50%"
        :src="require('../../assets/image/no_house.png')"
      />
    </div>
  </div>
</template>

<script>
import { housesAPI, housesConditionAPI, housesParamsAPI } from "@/api";
export default {
  name: "house",
  data() {
    let cityId = this.$store.state.id;
    return {
      value1: 0,
      value2: "a",

      areaList: [],
      rentType: [],
      fundMoney: [],
      popUp: true,
      houseList: [],
      params: {
        cityId,
        area: "",
        subway: "",
        rentType: null,
        price: null,
      },
    };
  },
  mounted() {
    this.getCondition();
    this.getHouse({ cityId: this.$store.state.id });
  },

  methods: {
    async getHouse(params) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      try {
        const res = await housesAPI(params);
        this.houseList = res.data.body.list;
      } catch (err) {
        this.$toast.error("接口报错");
      }
    },
    goHome() {
      this.$router.go(-1);
    },
    async getCondition() {
      const res = await housesConditionAPI({ id: this.$store.state.id });
      console.log(1111, res.data.body);

      this.areaList = [
        { text: res.data.body.area.label, value: res.data.body.area.value },
        { text: res.data.body.subway.label, value: res.data.body.subway.value },
      ];
      this.areaList[0].children = this.dealMessage(res.data.body.area.children);
      this.areaList[1].children = this.dealMessage(
        res.data.body.subway.children
      );

      this.rentType = this.dealMessageSingle(res.data.body.rentType);
      this.fundMoney = this.dealMessageSingle(res.data.body.price);
    },

    changeChoice() {
      this.popUp = true;
    },

    dealMessageSingle(arr) {
      let newArr = [];
      arr.forEach((item, index) => {
        newArr[index] = { text: item.label, value: item.value };
      });
      return newArr;
    },

    dealMessage(arr = []) {
      const newArray = [];
      arr.forEach((item, index) => {
        if (!item.children) {
          newArray[index] = { text: item.label, value: item.value };
          newArray[index].children = [{ text: "", value: "" }];
        } else {
          newArray[index] = { text: item.label, value: item.value };
          newArray[index].children = this.dealMessage(item.children);
        }
      });
      return newArray;
    },

    popUpModel() {
      console.log(2222);
      this.popUp = true;
    },

    async confirmFnOne(value, index) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const res = this.$refs.vanPicker.getValues();
      this.$refs.dropDown.toggle();
      if (res[0].value == "area") {
        //区域

        if (res[2].value && res[2].value != "null") {
          this.params.area = res[2].value;
        } else if (res[1].value && res[1].value != "null") {
          this.params.area = res[1].value;
        }
      } else if (res[0].value == "subway") {
        //地铁

        if (res[2].value && res[2].value != "null") {
          this.params.subway = res[2].value;
        } else if (res[1].value && res[1].value != "null") {
          this.params.subway = res[1].value;
        }
      }
      const res2 = await housesAPI(this.params);
      this.houseList = res2.data.body.list;
      this.$toast.success("加载成功");
      this.params.area = "";
      this.params.subway = "";
    },
    cancleFnOne() {
      this.$refs.dropDown.toggle();
    },
    cancleFnTwo() {
      this.$refs.dropDownTwo.toggle();
    },
    async confirmFnTwo() {
      this.$refs.dropDownTwo.toggle();
      const res = this.$refs.vanPickerTwo.getValues();
      this.params.rentType = res[0].value;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const res2 = await housesAPI(this.params);
      this.houseList = res2.data.body.list;
      this.$toast.success("加载成功");
    },
    cancleFnThree() {
      this.$refs.dropDownThree.toggle();
    },
    async confirmFnThree() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.$refs.dropDownThree.toggle();
      const res = this.$refs.vanPickerThree.getValues();
      this.params.price = res[0].value;
      const res2 = await housesAPI(this.params);
      this.houseList = res2.data.body.list;
      this.$toast.success("加载成功");
    },
    toCity() {
      this.$router.push({
        path: "/cityList",
        query: {
          level: 1,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.house_page {
  background-color: #fff;
  height: 100vh;
}
.house_page .van-search {
  background-color: #21b97a;
}
.house_page .icon-dituzhaofang {
  color: #fff;
}
.house_page .goHome {
  font-size: 0.58rem;
}
.house_page .iconfont {
  font-size: 0.53rem;
}
.house_page .van-dropdown-menu__bar--opened {
  z-index: 0;
}
// .house_page .van-card__title{
//   color: red;
// }
:deep(.van-swipe-cell) {
  .van-card__content {
    .van-card__title {
      font-size: 0.4rem;
      font-weight: bold;
      color: #394043;
    }
    .van-card__desc {
      font-size: 0.32rem;
      color: #afb2b3;
    }
    .tags {
      color: #39becd;
      background: #e1f5f8;
    }
    .price {
      font-size: 0.32rem;
      color: #fa5741;
    }
  }
}
</style>
